<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            height: 3000px;
        }
    </style>
</head>

<body>

</body>
<script>
    // 函数节流   =>  短时间内连续触发 -> 降频(降低执行的频率)


    // 没做任何优化 -> 滚动时触发频率太高了  => 没有必要指向那么多次  =>  降频
    // window.onscroll = function (e) {
    //     var scrollTop = document.documentElement.scrollTop;
    //     console.log("滚动时判断滚动条的位置", scrollTop);
    //     console.log("this", this);
    // }


    // 解决方法 -> 指定一个间隔时间 => 如果在间隔时间内连续触发,不做任何操作, 超出执行一次

    //  构造函数Date的静态方法   获取当前时间对应的毫秒数  var date =  new Date() ;  date*1
    // var start = Date.now();  // 页面加载时的时间(起始时间)
    // window.onscroll = function () {

    //     var now = Date.now();  // 每次滚动 -> 获取事件(事件触发时的事件)

    //     if (now - start >= 50) {
    //         var scrollTop = document.documentElement.scrollTop;
    //         console.log("滚动时判断滚动条的位置", scrollTop);

    //         start = now;  // 执行完毕 => 记录start = 当前时间(下次触发 要比当前时间大300ms)
    //     }
    // }




    // 函数节流封装


    function throttle(callback, time = 0) {
        var start = Date.now();
        return function (...list) {  // Rest参数  将接收的参数整合到数组中
            var now = Date.now();  // 每次滚动 -> 获取事件(事件触发时的事件)

            if (now - start >= time) {
                // var scrollTop = document.documentElement.scrollTop;
                // console.log("滚动时判断滚动条的位置", scrollTop);

                callback.apply(this, list);

                start = now;  // 执行完毕 => 记录start = 当前时间(下次触发 要比当前时间大300ms)
            }
        }
    }


    // var newFn = throttle(function () {
    //     var scrollTop = document.documentElement.scrollTop;
    //     console.log("滚动时判断滚动条的位置", scrollTop);
    // }, 50);


    // 每次滚动 -> 触发newFn -> newFn内部做了节流处理 -> 超出间隔时间之后执行  callback()
    // window.onscroll = newFn;




    window.onscroll = throttle(function () {
        var scrollTop = document.documentElement.scrollTop;
        console.log("滚动时判断滚动条的位置", scrollTop);
    }, 30);
</script>

</html>